import React, { memo } from 'react';
import { shallowEqual, useSelector } from 'react-redux';

import { HeaderWrapper, HeaderLeft, HeaderRight } from "./style";

const PanelHeader = memo((props) => {

  const { playList, currentSong } = useSelector(state => ({
    playList: state.getIn(["player", "playList"]),
    currentSong: state.getIn(["player", "currentSong"])
  }), shallowEqual);

  return (
    <HeaderWrapper>
      <HeaderLeft>
        <h3>播放列表（{playList.length}）</h3>
        
        <div className="operator">
          <button>
            <i className="sprite_playlist icon favor"></i>
            收藏全部
          </button>
          <button>
            <i className="sprite_playlist icon remove"></i>
            删除
          </button>
        </div>
      </HeaderLeft>

      <HeaderRight>
        { currentSong.name }
        <button className="sprite_playlist close" onClick={e => props.changeShowPanle()}>
        </button>
      </HeaderRight>
    </HeaderWrapper>
  )
})

export default PanelHeader